<template>
    <div class="topic-list" id="topic-list" :style="{height:`${boxHeight}`+'px'}">
    <div class="topic-box">
        <div class="head-menu">
            <div class="head-menu-box">
                    <div class="menu-item" v-for="(c,index) in classifyList" :key="index" :class="{'selected':currentClassify==c.keyVal}" @click="currentClassify=c.keyVal">{{c.keyVal}}</div>
            </div>
        </div>
        <div class="list-box">
            <div v-for="(t,index) in topicList" :key="index" class="box" @click="toDetail(t)">
                <span class="title">{{t.title}}</span>
                <div class="description">{{t.description}}</div>
                <div class="pic-box">
                    <template  v-for="(pic,index) in picConcat(t)">
                        <img :key="index" v-lazy="getFilePath(pic.fileNo)" class="preview-img"/>
                    </template>
                </div>
                <div class="box-foot">
                    <span>创建时间：<span>{{t.createTime}}</span></span>
                    <span>点击：<span>{{t.hit}}</span></span>
                </div>
            </div>

        </div>
        <div class="foot-page">
                <span class="button pre" @click="prePage">上一页</span> 
                <select v-model="page.current" @change="pageQuery">
                    <option v-for="p in page.pages" :value="p" :key="p">第{{p}}页</option>
                </select>
                <span class="button next" @click="nextPage">下一页</span>
        </div>

    </div>


    </div>
</template>

<script>
import { Previewer } from 'vux'
import {queryTopicList} from '@/api/topic'
import {mapState} from 'vuex'
export default {
    name:"topicList",
    components:{
        Previewer
    },
    data(){
        return{
            options: {
                    getThumbBoundsFn (index) {
                    // find thumbnail element
                    let thumbnail = document.querySelectorAll('.piclist')[index]
                    // get window scroll Y
                    let pageYScroll = window.pageYOffset || document.documentElement.scrollTop
                    // optionally get horizontal scroll
                    // get position of element relative to viewport
                    let rect = thumbnail.getBoundingClientRect()
                    // w = width
                    return {x: rect.left, y: rect.top + pageYScroll, w: rect.width}
                    // Good guide on how to get element coordinates:
                    // http://javascript.info/tutorial/coordinates
                    }
                },
                topicList:[
                  
                ],
                page:{
                    current:1,
                    size:10,
                    total:0,
                    pages:1
                },
                classifyList:[],
                currentClassify:"",
                scrollPosition:0,
                boxHeight:0,
                players:[]
        }
    },
    methods:{
        prePage(){
           this.page.current=this.page.current-1<1?1:this.page.current-1;
           this.pageQuery();
        },
        nextPage(){
            this.page.current=this.page.current+1>this.page.pages?this.page.pages:this.page.current+1;
            this.pageQuery();
        },
        toDetail(t){
                this.$router.push({name:"topicDetil",params:{id:t.id}});
        },
        scrollList(e){
                console.log(e)
        },
        testData(){ 
            for(let i=0;i<20;i++){
                    var t = {
                        title:"这个是一个标题没呢日哦你",
                        description:"备注喜喜的花费巨大横幅吉安市附件",
                        picListObj:[{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""}],
                        thumbListObj:[{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""},{fileNo:""}],
                        createTime:"2017-09-01",
                        hit:902
                    }
                    this.topicList.push(t);
            }
            for(let i=0;i<20;i++){
                    var t = {
                        keyVal:"类别"+i
                    }
                    this.classifyList.push(t);
            }
        },
        picConcat(topic){
                let list =  topic.picListObj.concat(topic.thumbListObj);
                return list.length>8?list.slice(0,8):list;
        },
        show(index){
            this.$refs.previewer.show(index);
        },
        pageQuery(){
            this.queryTopic();
        },
        queryTopic(param){
                queryTopicList({...this.page,...param}).then((res)=>{
                    this.topicList = res.data.records;
                    this.page.total = res.data.total;
                    this.page.pages = res.data.pages;
                    this.page.current =res.data.current;
                    this.page.size = res.data.size;
                     document.querySelector('#topic-list').scrollTop = 0;
                }).catch(()=>{

                })
        },
        getFilePath(code){
            return this.$baseUrl+"/file/load?fileNo="+code
        },
    },
    computed:{
        ...mapState("app",{
            scrollTop:state=>state.scrollTop
        })
    },
    mounted(){
        this.queryTopic();
        this.boxHeight = window.innerHeight - 46 - 53
    },
    activated(){
       document.querySelector('#topic-list').scrollTop = this.scrollTop
    }
}
</script>
<style lang="less" scoped>
.topic-list{
    margin-bottom: 10px;
  background-color: #fff;
  width: 100%;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.list-box{
     padding:0px 5px;
}
.head-menu{
    height: 30px;
    width: 100%;
    top: 0px;
    overflow-x: scroll;
    transition: all .5s, width .2s;
    border-bottom: 0.5px solid #ccc;
    box-shadow: 0px 0px 10px 4px #ccc;
    .head-menu-box{
        white-space:nowrap;
        .menu-item{
            margin-left: 10px;
            font-size: 14px;
            display: inline-block;
            padding:2px 10px;
        }
        .selected{
            border-bottom: 2px solid red;
            box-sizing: content-box;
            color:#bd691a;
        }
    }
}
.topic-box{
    width:100%;
    box-sizing: inherit;
}
.box{
    box-shadow: 0px 0px 17px 2px #ccc;
    padding:10px;
    margin-top:10px;
    .title{ 
        font-size: 14px;
        
    }
    .description{
        font-size: 12px;
        color: #ccc;
        overflow: hidden;
    }
}
.pic-box{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .preview-img{
        width:80px;
        height:60px;
        border:none;
        margin-top:5px;
        object-fit: scale-down;
        
    }
}
.box-foot{
    padding-top: 5px;
    font-size:12px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #ccc;
}
.foot-page{
    display: flex;
    justify-content: space-around;
    align-content: center;
    margin-top:20px;
    align-items: center;
    .button{
        padding:2px 6px;
        display: inline-block;
        border: 1px solid #db6527;
    }
    select{
        width:120px;
        font-size: 14px;
        line-height: 25px;
        height:25px;
        text-align: center;
    }
}
</style>


